window.RMBConverterRenderer = class RMBConverterRenderer {
    static getHTML() {
        return `
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gradient-to-r from-green-50 to-emerald-50 px-6 py-4 border-b border-gray-200">
                    <h2 class="text-3xl font-bold text-gray-800 mb-2 flex items-center">
                        <i data-feather="dollar-sign" class="mr-3 text-green-600"></i>
                        人民币大小写转换
                    </h2>
                    <p class="text-gray-600">支持数字金额与中文大写金额的双向转换</p>
                </div>
                
                <div class="p-6">
                    <!-- 数字转大写 -->
                    <div class="mb-8">
                        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                            <i data-feather="arrow-up" class="mr-2 text-blue-600"></i>
                            数字转大写
                        </h3>
                        
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">输入金额 (数字)</label>
                                <input type="number" id="number-input" 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       placeholder="例如：123456.78" step="0.01" min="0">
                                <div class="flex justify-between mt-2">
                                    <button id="clear-number" 
                                            class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                                        <i data-feather="trash-2" class="w-4 h-4 mr-2"></i>
                                        清空
                                    </button>
                                    <button id="convert-to-upper" 
                                            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                                        <i data-feather="arrow-right" class="w-4 h-4 mr-2"></i>
                                        转换
                                    </button>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">大写金额</label>
                                <div id="upper-result" 
                                     class="w-full h-20 px-4 py-3 border border-gray-300 rounded-lg bg-gray-50 overflow-y-auto">
                                    <span class="text-gray-400">转换结果将显示在这里</span>
                                </div>
                                <button id="copy-upper" 
                                        class="mt-2 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                                    <i data-feather="copy" class="w-4 h-4 mr-2"></i>
                                    复制结果
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分隔线 -->
                    <div class="border-t border-gray-200 my-8"></div>
                    
                    <!-- 大写转数字 -->
                    <div class="mb-8">
                        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                            <i data-feather="arrow-down" class="mr-2 text-green-600"></i>
                            大写转数字
                        </h3>
                        
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">输入大写金额</label>
                                <textarea id="upper-input" 
                                          class="w-full h-20 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                                          placeholder="例如：壹拾贰万叁仟肆佰伍拾陆元柒角捌分"></textarea>
                                <div class="flex justify-between mt-2">
                                    <button id="clear-upper" 
                                            class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                                        <i data-feather="trash-2" class="w-4 h-4 mr-2"></i>
                                        清空
                                    </button>
                                    <button id="convert-to-number" 
                                            class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                                        <i data-feather="arrow-right" class="w-4 h-4 mr-2"></i>
                                        转换
                                    </button>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">数字金额</label>
                                <div id="number-result" 
                                     class="w-full h-20 px-4 py-3 border border-gray-300 rounded-lg bg-gray-50 flex items-center">
                                    <span class="text-gray-400">转换结果将显示在这里</span>
                                </div>
                                <button id="copy-number" 
                                        class="mt-2 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                                    <i data-feather="copy" class="w-4 h-4 mr-2"></i>
                                    复制结果
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 常用示例 -->
                    <div class="bg-blue-50 rounded-lg p-4">
                        <h4 class="font-semibold text-gray-800 mb-3 flex items-center">
                            <i data-feather="info" class="w-4 h-4 mr-2 text-blue-600"></i>
                            常用示例
                        </h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <p class="text-sm text-gray-600 mb-1">数字转大写：</p>
                                <div class="space-y-1 text-sm">
                                    <div><code class="bg-white px-2 py-1 rounded">1234.56</code> → 壹仟贰佰叁拾肆元伍角陆分</div>
                                    <div><code class="bg-white px-2 py-1 rounded">10000</code> → 壹万元整</div>
                                    <div><code class="bg-white px-2 py-1 rounded">0.08</code> → 零元零角捌分</div>
                                </div>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 mb-1">大写转数字：</p>
                                <div class="space-y-1 text-sm">
                                    <div>壹仟贰佰叁拾肆元伍角陆分 → <code class="bg-white px-2 py-1 rounded">1234.56</code></div>
                                    <div>壹万元整 → <code class="bg-white px-2 py-1 rounded">10000.00</code></div>
                                    <div>捌分 → <code class="bg-white px-2 py-1 rounded">0.08</code></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    
    static init() {
        const numberInput = document.getElementById('number-input');
        const upperInput = document.getElementById('upper-input');
        const upperResult = document.getElementById('upper-result');
        const numberResult = document.getElementById('number-result');
        
        const convertToUpperBtn = document.getElementById('convert-to-upper');
        const convertToNumberBtn = document.getElementById('convert-to-number');
        const clearNumberBtn = document.getElementById('clear-number');
        const clearUpperBtn = document.getElementById('clear-upper');
        const copyUpperBtn = document.getElementById('copy-upper');
        const copyNumberBtn = document.getElementById('copy-number');
        
        // 数字转大写
        const convertToUpper = () => {
            const amount = numberInput.value.trim();
            if (!amount) {
                DevToolsUtils.showToast('请输入金额', 'error');
                return;
            }
            
            const result = RMBConverter.toUppercase(amount);
            if (result.success) {
                upperResult.innerHTML = `<span class="text-gray-800 font-medium">${result.data}</span>`;
                upperResult.classList.remove('error-border');
                upperResult.classList.add('success-border');
                DevToolsUtils.showToast('转换成功', 'success');
            } else {
                upperResult.innerHTML = `<span class="text-red-600">${result.error}</span>`;
                upperResult.classList.remove('success-border');
                upperResult.classList.add('error-border');
                DevToolsUtils.showToast(result.error, 'error');
            }
        };
        
        // 大写转数字
        const convertToNumber = () => {
            const amount = upperInput.value.trim();
            if (!amount) {
                DevToolsUtils.showToast('请输入大写金额', 'error');
                return;
            }
            
            const result = RMBConverter.toLowercase(amount);
            if (result.success) {
                numberResult.innerHTML = `<span class="text-gray-800 font-medium text-xl">￥${result.data}</span>`;
                numberResult.classList.remove('error-border');
                numberResult.classList.add('success-border');
                DevToolsUtils.showToast('转换成功', 'success');
            } else {
                numberResult.innerHTML = `<span class="text-red-600">${result.error}</span>`;
                numberResult.classList.remove('success-border');
                numberResult.classList.add('error-border');
                DevToolsUtils.showToast(result.error, 'error');
            }
        };
        
        // 事件监听
        convertToUpperBtn.addEventListener('click', convertToUpper);
        convertToNumberBtn.addEventListener('click', convertToNumber);
        
        // 回车键转换
        numberInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                convertToUpper();
            }
        });
        
        upperInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                convertToNumber();
            }
        });
        
        // 实时转换
        let numberTimeout;
        numberInput.addEventListener('input', () => {
            clearTimeout(numberTimeout);
            numberTimeout = setTimeout(() => {
                if (numberInput.value.trim()) {
                    convertToUpper();
                } else {
                    upperResult.innerHTML = '<span class="text-gray-400">转换结果将显示在这里</span>';
                    upperResult.classList.remove('success-border', 'error-border');
                }
            }, 500);
        });
        
        let upperTimeout;
        upperInput.addEventListener('input', () => {
            clearTimeout(upperTimeout);
            upperTimeout = setTimeout(() => {
                if (upperInput.value.trim()) {
                    convertToNumber();
                } else {
                    numberResult.innerHTML = '<span class="text-gray-400">转换结果将显示在这里</span>';
                    numberResult.classList.remove('success-border', 'error-border');
                }
            }, 500);
        });
        
        // 清空功能
        clearNumberBtn.addEventListener('click', () => {
            numberInput.value = '';
            upperResult.innerHTML = '<span class="text-gray-400">转换结果将显示在这里</span>';
            upperResult.classList.remove('success-border', 'error-border');
            numberInput.focus();
        });
        
        clearUpperBtn.addEventListener('click', () => {
            upperInput.value = '';
            numberResult.innerHTML = '<span class="text-gray-400">转换结果将显示在这里</span>';
            numberResult.classList.remove('success-border', 'error-border');
            upperInput.focus();
        });
        
        // 复制功能
        copyUpperBtn.addEventListener('click', async () => {
            const text = upperResult.textContent;
            if (text && !text.includes('转换结果将显示在这里') && !text.includes('请输入')) {
                const success = await DevToolsUtils.copyToClipboard(text);
                if (success) {
                    DevToolsUtils.showToast('大写金额已复制到剪贴板', 'success');
                }
            } else {
                DevToolsUtils.showToast('没有可复制的内容', 'error');
            }
        });
        
        copyNumberBtn.addEventListener('click', async () => {
            const text = numberResult.textContent;
            if (text && !text.includes('转换结果将显示在这里') && !text.includes('请输入')) {
                // 提取数字部分
                const numberMatch = text.match(/[\d.]+/);
                const numberValue = numberMatch ? numberMatch[0] : text;
                const success = await DevToolsUtils.copyToClipboard(numberValue);
                if (success) {
                    DevToolsUtils.showToast('数字金额已复制到剪贴板', 'success');
                }
            } else {
                DevToolsUtils.showToast('没有可复制的内容', 'error');
            }
        });
        
        // 初始化图标
        setTimeout(() => {
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }, 100);
    }
};